<template>
	<div class="padding-across-10">
		<headerOpreate style="padding-bottom: 3px" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" label-position="left">
			<el-form-item label="年份" prop="year">
				<el-date-picker size="small" v-model="addForm.year" align="right" type="year" placeholder="选择年" @change="createPicker">
				</el-date-picker>
			</el-form-item>
		</el-form>
		<div style="text-align: right;">
			<i class="fa fa-square" style="color:#7EA0E2;"></i>
			<span style="font-size: 16px">节假日</span>
			<!--<i class="fa fa-square" style="color: #fff;"></i>
			<span style="font-size: 16px">工作日</span>-->
		</div>
		<div id="divPickers"></div>
	</div>
</template>
<script>
	import headerOpreate from '../../../../components/headerOpreate'
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import Kalendae from 'Kalendae'
	var picker = null;
	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				addForm: {
					year: (new Date().getFullYear()).toString()
				},
				addRules: {
					year: [{
						required: true,
						message: "节假日描述不能为空",
						trigger: 'change'
					}]
				},
				opreateDatas: [{
					show: true,
					type: "primary",
					size: "small",
					icon: "el-icon-eleg-icon_drive",
					name: this.$t('message.save'),
					action: "saveSubmit"
				}]
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			saveSubmit() {
				this.$refs['addForm'].validate((valid) => {
					if(valid) {
						if(picker.getSelectedAsText().length > 0) {
							HttpServer.httpPost.call(this, '/Api/Holiday/Post', {
								dates: picker.getSelectedAsText(),
								year: this.addForm.year,
								UserId: parseInt(GloabFun.getKeyId())
							}, function(response) {}, function(response) {
								// console.log(response)
								if(response.data.code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.saveSuccess'),
										type: 'success',
										duration: 2500
									});
									this.$emit('changeView', 'List', {});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
							})
						} else {
							this.$notify({
								title: this.$t('message.warning'),
								message: '请完善节假日设值',
								type: 'warning',
								duration: 2500
							});
						}
					} else {
						return false;
					}
				});
			},
			createPicker() {
				if($('#divPickers>.kalendae').length > 0) {
					$('#divPickers>.kalendae').remove();
				}
				this.addForm.year = (this.addForm.year.getFullYear()).toString();
				picker = new Kalendae({
					attachTo: "divPickers",
					months: 12,
					mode: 'multiple',
					direction:'future',
					viewStartDate: this.addForm.year,
					selected: this.selectDates
				});
			}
		},
		created() {
			this.$nextTick(function() {
				picker = new Kalendae({
					attachTo: "divPickers",
					months: 12,
					mode: 'multiple',
					direction:'future',
					viewStartDate:this.addForm.year,
					selected: this.selectDates
				});
			})
		}
	}
</script>
<style scoped>
	@import "../../../../../node_modules/kalendae/build/kalendae.css"
</style>
<style scoped lang="less">

</style>
<style lang="less">
	#divPickers {
		.k-btn-previous-year,
		.k-btn-previous-month,
		.k-btn-next-year,
		.k-btn-next-month {
			display: none;
		}
	}
	
	.kalendae .k-calendar {
		display: inline-block;
		zoom: 1;
		*display: inline;
		/* width改为100% width:155px;*/
		width: 25%;
		vertical-align: top;
	}
	
	.kalendae .k-title,
	.kalendae .k-header,
	.kalendae .k-days {
		/* width改为100% */
		/* width:154px; */
		width: 100%;
		display: block;
		overflow: hidden;
	}
	
	.kalendae .k-header span {
		text-align: center;
		font-weight: bold;
		/* 这里的width要和.kalendae .k-days span 里面的相等 */
		width: 12.8%;
		padding: 1px 0;
		color: #666;
	}
	
	.kalendae .k-days span {
		/* 水平居中 */
		text-align: center;
		width: 12.8%;
		/* 高度 4.5em效果比较好 height等于line-height就能垂直居中了 */
		height: 2em;
		line-height: 2em;
		padding: 2px 3px 2px 2px;
		border: 1px solid transparent;
		border-radius: 3px;
		color: #999;
	}
</style>